<template>
	<view>
		<uni-nav-bar :fixed="true" @clickLeft="$pageBack()" left-icon="back" title="商品详情" background-color="#ECE6D5" :status-bar="true" border="false"></uni-nav-bar>
		<view class="swiper_top">
			<swiper style="height: 520rpx" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper-item" v-for="(item, index) in dataInfo.images" :key="index">
					<view>
						<image @click="$previewImage(dataInfo.images, index)" :src="item" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="flex_jc_sb">
				<view class="price">
					<text>{{ dataInfo.points }}</text>
					稻穗值
					<span v-if="dataInfo.price != 0">
						+
						<text>{{ dataInfo.price }}</text>
						{{ dataInfo.priceType == 1 ? '元' : '快递费' }}
					</span>
				</view>

				<view class="tip">库存 {{ dataInfo.count }}</view>
			</view>
			<view class="title">{{ dataInfo.name }}</view>
		</view>
		<view class="info">
			<view class="tts">— 图文详情 —</view>
			<view class="htmltext" v-html="dataInfo.info"></view>
		</view>
		<view class="bottom_btns">
			<view class="cont">
				<view class="onebtns active" @click="open">
					<text>{{ dataInfo.points }}</text>
					稻穗值
					<span v-if="dataInfo.price != 0">
						+
						<text>{{ dataInfo.price }}</text>
						{{ dataInfo.priceType == 1 ? '元' : '快递费' }}
					</span>
					立即兑换
				</view>
			</view>
		</view>

		<uni-popup ref="popupRef" type="bottom" :safe-area="false">
			<view class="popup">
				<uni-icons @click="close" type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
				<view class="pop_top">
					<view class="flex">
						<view class="img">
							<image :src="dataInfo.cover" mode="aspectFill"></image>
						</view>
						<view class="flex_r">
							<view class="tit">{{ dataInfo.name }}</view>
							<view class="">
								<view class="price">
									<text>{{ dataInfo.points }}</text>
									稻穗值
									<span v-if="dataInfo.price != 0">
										+
										<text>{{ dataInfo.price }}</text>
										{{ dataInfo.priceType == 1 ? '元' : '快递费' }}
									</span>
								</view>
								<view class="ss">
									已选：
									<text>{{ specs }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="gg">
					<view class="ggtit">规格</view>
					<view class="tipList">
						<view class="item" v-for="(item, index) in dataInfo.specs" :key="index" :class="specs == item ? 'act_item' : ''"
						@click="specsChange(item)">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="num flex_jc_sb">
					<view class="tt1">购买数量</view>
					<view class="tt2">限购1件</view>
				</view>
				<view class="" style="height: 200rpx"></view>
				<view class="footer_bottom">
					<view class="btn" @click="goConfirm">
						<text>{{ dataInfo.points }}</text>
						稻穗值
						<span v-if="dataInfo.price != 0">
							+
							<text>{{ dataInfo.price }}</text>
							{{ dataInfo.priceType == 1 ? '元' : '快递费' }}
						</span>
						立即兑换
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupTs" type="center">
			<view class="popup1">
				<view class="pop_content">稻穗值不足，兑换失败！</view>
				<view class="pop_btn" @click="close">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { productInfo, createOrder } from '@/api/shop.js';
import { getConfig } from '@/api/login.js';
import { getData } from '@/api/user.js';
const popupRef = ref(null);
const popupTs = ref(null);
const open = () => {
	if (dataInfo.points > num.value) {
		popupTs.value.open();
	} else {
		popupRef.value.open();
	}
};
const close = () => {
	popupRef.value.close();
	popupTs.value.close();
};
const specsChange = (e)=>{
	specs.value = e
}
const goConfirm = () => {
	dataInfo.specs = specs.value
	uni.setStorageSync('productInfo',dataInfo)
	uni.navigateTo({
		url: '/mypage/more/confirm'
	});
	close()
};
const dataInfo = reactive({});
const points = ref(0);
const num = ref(0);
const specs = ref('');
onLoad((option) => {
	getData({}).then((res) => {
		if (res.code == 200) {
			points.value = res.data.points;
			getConfig({}).then((res) => {
				if (res.code == 200) {
					num.value = Math.max(points.value - res.data.mallNotUseUserPoints, 0);
				}
			});
		}
	});
	productInfo({ id: option.id }).then((res) => {
		if (res.code == 200) {
			res.data.images = res.data.images.split(',');
			res.data.specs = res.data.specs.split('/');
			specs.value = res.data.specs[0];
			Object.assign(dataInfo, res.data);
		}
	});
});
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}
.swiper_top {
	width: 750rpx;
	height: 520rpx;
	background: #ffffff;
	.swiper-item {
		width: 750rpx;
		height: 520rpx;
		image {
			width: 750rpx;
			height: 520rpx;
			display: block;
		}
	}
}
/* #ifdef MP-WEIXIN */
// 默认指示点样式
wx-swiper .wx-swiper-dot {
	position: relative;
	background-color: #75613e;
	width: 12rpx;
	border-radius: 10rpx;
	height: 8rpx;
	opacity: 0.4;
}
// 当前选中样式
wx-swiper .wx-swiper-dot-active {
	background-color: #75613e;
	width: 40rpx;
	border-radius: 10rpx;
	opacity: 10;
}
/* #endif */

.content {
	width: 750rpx;
	padding: 20rpx;
	box-sizing: border-box;
	.price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #75613e;
		margin-top: 6rpx;
		text-align: justified;
		text {
			font-family: 'DIN-BOLD';
			font-weight: 500;
			font-size: 40rpx;
			color: #892b1b;
			margin-right: 6rpx;
		}
	}
	.tip {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
	}
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		margin: 12rpx auto;
	}
}
.info {
	text-align: center;
	.tts {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
	}
	.htmltext {
		margin-top: 10rpx;
		padding: 20rpx;
	}
}

.popup {
	width: 750rpx;
	background: #ffffff;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding: 32rpx 30rpx;
	box-sizing: border-box;
	position: relative;
	.close {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}
	.pop_top {
		margin-top: 38rpx;
		.img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 1px solid #d1d1d6;
			margin-right: 20rpx;
			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
		.flex_r {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 160rpx;
			.tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #1b1b1b;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2; //几行就填几
				-webkit-box-orient: vertical;
			}
			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
				text-align: justified;
				text {
					font-family: 'DIN-BOLD';
					font-weight: 500;
					font-size: 40rpx;
					color: #892b1b;
					margin-right: 6rpx;
				}
			}
			.ss {
				margin-top: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #1b1b1b;
				text {
					color: #892b1b;
				}
			}
		}
	}
	.gg {
		margin-top: 30rpx;
		.ggtit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
		}
		.tipList {
			margin: 20rpx auto 0rpx;
			display: flex;
			flex-wrap: wrap;
			.item {
				height: 52rpx;
				background: #f0f0f0;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				padding: 0rpx 45rpx;
				line-height: 52rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #1b1b1b;
				margin-bottom: 20rpx;
				margin-right: 20rpx;
			}
			.act_item {
				background: #b19561;
				color: #ffffff;
			}
		}
	}
	.num {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1b1b1b;
		.tt2 {
			color: #75613e;
		}
	}
	.footer_bottom {
		width: 690rpx;
		min-height: 80rpx;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.btn {
			width: 690rpx;
			height: 80rpx;
			background: #e3d0ad;
			border-radius: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #75613e;
			text-align: center;
			line-height: 80rpx;
		}
	}
}
.popup1 {
	width: 620rpx;
	background: linear-gradient(180deg, #ece6d5 0%, #f7f8f6 100%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 32rpx 30rpx;
	box-sizing: border-box;
	.icon {
		display: block;
		text-align: right;
	}
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #4e3f23;
		text-align: center;
	}
	.pop_content {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #b19561;
		text-align: center;
		margin: 40rpx auto;
	}
	.pop_btn {
		width: 280rpx;
		height: 72rpx;
		background: #d8c6a7;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		text-align: center;
		line-height: 72rpx;
		margin: 0 auto;
	}
}
</style>
